<template>
  <div id="app" :class="['min-h-screen relative text-gray-100', isDark ? 'bg-gray-900' : 'bg-gray-300']">

    <!-- 窗口控制栏容器，负责窗口拖拽 -->
    <div
      :class="['fixed top-0 left-0 w-full h-8 flex justify-between items-center z-50', isDark ? 'bg-gray-600' : 'bg-gray-300']"
      style="-webkit-app-region: drag;">

      <!-- 返回按钮（禁用拖拽，非首页才显示） -->
      <div class="flex items-center pl-2 w-32 " style="-webkit-app-region: no-drag;">
        <button v-if="!isHome" @click="goBack"
          class="w-6 h-6 flex items-center justify-center rounded-full hover:bg-gray-500/50 transition" title="返回">
          <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"
            stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7" />
          </svg>
        </button>
      </div>

      <!-- 中间标题 -->
      <div class="flex-1 text-center text-xs font-medium truncate text-gray-400" :class="{'text-gray-100': !isDark}" style="-webkit-app-region: drag;">
        Mozz电影库
      </div>

      <!-- 窗口按钮区域 -->
      <div class="flex space-x-2 px-4 w-32 justify-end" style="-webkit-app-region: no-drag;">
        <Tooltip text="最小化" position="bottom">
          <button @click="minimizeWindow"
            class="w-3 h-3 rounded-full bg-yellow-500 hover:bg-yellow-400 transition-colors duration-200"></button>
        </Tooltip>
        <Tooltip text="最大化" position="bottom">
          <button @click="toggleMaximize"
            class="w-3 h-3 rounded-full bg-green-500 hover:bg-green-400 transition-colors duration-200"></button>
        </Tooltip>
        <Tooltip text="关闭" position="bottom">
          <button @click="closeWindow"
            class="w-3 h-3 rounded-full bg-red-500 hover:bg-red-400 transition-colors duration-200"></button>
        </Tooltip>
      </div>
    </div>

    <!-- 路由出口 -->
    <main class="absolute top-8 left-0 right-0 bottom-0 overflow-hidden">
      <router-view v-slot="{ Component }">
        <keep-alive include="MovieList">
          <component :is="Component" />
        </keep-alive>
      </router-view>
    </main>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, ref, computed } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import Tooltip from './components/Tooltip.vue'

const isDark = ref<boolean>(false)
const router = useRouter()
const route = useRoute()

// 计算属性：判断是否在首页
const isHome = computed(() => route.path === '/')

// 返回按钮方法
const goBack = () => {
  if (router.options.history.state.back) {
    router.back()
  }
}

// 窗口控制方法
const minimizeWindow = () => (window as any).electronAPI?.minimizeWindow()
const toggleMaximize = () => (window as any).electronAPI?.toggleMaximize()
const closeWindow = () => (window as any).electronAPI?.closeWindow()

onMounted(() => {
  // 主题
  const saved = localStorage.getItem('theme')
  if (saved === 'light') {
    isDark.value = false
    document.documentElement.classList.remove('dark')
  } else {
    isDark.value = true
    document.documentElement.classList.add('dark')
  }
})
</script>
